*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: white;
}
.container{
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
}
@viewWidth:720px;
header{
    nav{
        #container-fluid{
            position: relative;
            z-index: 3;
            @height:50px;
            width: 100%;
            height: @height;
            background: #3D4450;
            .nav-box{
                display: flex;
                flex-basis: 100%;
                box-sizing: border-box;
                justify-content: center;
                height: @height;
//              background: red;
                flex-basis: 100%;
//              flex: 1;
                background: #3D4450;
                ul{
                   #ll{
//                      margin-top: 20px;
//                      display: inline-block;
                        width: 20px;
                       height: 50px;
//                     background: red;
                        }
                        
//                   display: flex;
//                  justify-content: center;
                    width:100% ;
                    float: left;
                    @media all and (max-width:980px){
                        display: none;
                    }
                    span{
                        float: left;
                        display: inline-block;
                        margin-left:0px;
                        width:180px;
                        
                    }
                    li:nth-child(2){
                        background: #D9534F;
                    }
                   li{
                       p{
                           color: white;
                           margin-right: 5px;
                           display: inline-block;
                       }
                       img{
//                          width: 100%;
                           height:@height ;
                       }
                        float: left;
                        width:80px;
                        text-align: center;
                        font-family: "微软雅黑";
                        font-size: 14px;
                        line-height:@height;
                        margin-left: 20px;
                    } 
                   
                }
                
                #next{
                    width:980px;
                    height: 95px;
                    background: #3D4450;
                    display: flex;
//                  flex-basis: 100%;
                    box-sizing: border-box;
                    justify-content: center;
                 @media only screen and (min-width:768px) and (max-width:980px) {
                    display: block;
                }
                    @media all and (min-width:980px){
                        display: none;
                    };
                    @media all and (max-width:768px){
                        display: none;
                    }
                    
//                 @media all and {
//                      display: none;
//                  }
                    
                    .nx{
                        width: 100%;
                    }

                    img{
                        margin: 0 auto;
                        display: block;
                    }
                    li:nth-child(1){
                        background: #D9534F;
                    }
                    
                      
                       
                    
                    li{
                        width:90%;
                        p{
                           color: white;
                           margin-right: 5px; 
                        }
                        box-sizing: border-box;           
                       margin-top:5px;
                        float: left;
                        width:13%;
                        text-align: center;
                        font-family: "微软雅黑";
                        height: 40px;
                        line-height: 40px;
                        font-size: 12px;
                        
                        
//                      line-height:@height;
                        margin-left: 5px;
                    }
//                  align-items: center;
                }
                
//          
                #san{
                    width:600px;
                    display: flex;
                    justify-content:center;
                     @media all and (min-width:768px){
                        display: none;
                    }
                    #t div{flex: 1;}
                    #t{
                        
                        width: 100%;
                        display: flex;
                        
                       span{
                            display: block;
    //                      width: 100%;
    //                      height: 50px;
    //                      margin-left:-40px;
                                img{
        //                       margin-left:190px;
                                
                                height: 50px;
                                }
                            }
                     p{
                        max-width: 30%;
                        float: right;
                        color: white;
    //                  line-height: @height;
                        margin-right: 20px;
                        cursor: pointer;
                        
                        @media all and (max-width:768px){
                            display: block;
                        }

                    
                      }
                    }

                }
                
                
                
            }
            

        }
        .yc{
             @media all and (min-width:768px){
               display:none;
            }
            position: absolute;
            z-index:3;
                width:100%;
                height:220px;
                border-top: 1px solid #101010;
                background:#3D4450;
                display: none;
//              display: flex;
//               flex-direction: column
//             align-items: center;
                li{
                    box-sizing: border-box;
                    padding: 3px;
                    font-family: "微软雅黑";
                    width: 100%;
                    height: 30px;
                    padding-left: 20px;
                    padding-top: 6px;
//                  background: red;
//                  margin-left: 20px;
                    font-size:14px;
//                   line-height: 5%;
//                   float: left;
                    p{
                        line-height: 10%;
                        margin-right: 10px;
                        margin-top: 5px;
                        color: white;
                    }
                    &:hover{
                        background: #262C35;
                    }
                }
            }
        
    }
 
            
       #yc{
           border-radius: 4px;
           box-sizing: border-box;
           margin-top: 5px;
           margin-left:60px;
           display: inline-block;
//         display: flex;justify-content: center;
           width: 40px;
           height: 40px;
           line-height: 40px;
           text-align: center;
           border: 1px solid #343537;
//         overflow: hidden;
           p{line-height: 0px;
              i{
               margin-top: -10px;
//             margin-left: 15px;
//             line-height: 30px;
                text-align: center;
           } 
           }
           
           
          
       }
}
  
main{
    
//  float: left;
    .content-box{
        @media all and (max-width:980px){
            max-width: 750px;
//              width: 100%;
//              justify-content: center;
            }
//      width: 100%;
//      display: flex;
        margin-top: 30px;
        @height:500px;
//      background: lightblue;
        height: @height;
        #left{
            display: flex;
           width: 70%; 
            @media all and (max-width:980px){
                width: 100%;
                justify-content: center;
            }
            section{
                float: left;
            }
            aside{
                float: right;
            }
            #top{
                max-width: 750px;
                height: 80px;
                border-radius: 4px;
//              border: 1px solid #E1E1E1;
                box-sizing: border-box;
                box-shadow: 0px 0px 1px 1px #CCCCCC;
                font-size: 12px;
                @media all and (max-width:980px){
                 margin-top: 60px;
            }
            @media all and (max-width:768px){
                 margin-top: 20px;
            }
//              line-height: 80px;
                text-align: left;
                padding: 20px;
                font-family: "微软雅黑";
                color: #666666;
                margin-top: 10px;
                margin-bottom: 20px;
                
            }
//         height: @height;
           background: #FEFEFE;
           float: left;
           border-right: 15px solid white;
           border-left: 15px solid white;
           box-sizing: border-box;
           
          #se{
//            max-height:371px;
//            float: left;
              
              max-width:750px;
              display: flex;
               max-height:271px;
               border-radius: 4px;
//              border: 1px solid #E1E1E1;
                box-sizing: border-box;
//              box-shadow: 0px 0px 1px 1px #CCCCCC;
                font-size: 12px;
//              line-height: 80px;
                text-align: left;
//              flex-basis: 100%;
//              padding: 20px;
                font-family: "微软雅黑";
                color: #666666;
                margin-top: 10px;
                margin-bottom: 40px;
                div{
                    
                    width: 100%;
                    max-height:271px;
                   a{
                   border-radius: 4px;
                    height: 100%;
                   display: inline-block;
                   box-sizing: border-box;
                   img{
                        box-shadow: 0px 0px 1px 1px #CCCCCC;
                       
                       border-radius: 4px;
//                     max-width: 750px;
                       width: 100%;
//                     max-height:271px;
//                     height:100%;
               }
               }
                }

               
           }
           #arc{
//             position: relative;
               max-width:750px;
               #time{
                   @media all and (max-width:768px){
                        display: none;
                    }
                   box-sizing: border-box;
                   position: absolute;
                   top:-25px;
                   left:-10px;
                   width: 50px;
                   height:50px;
                   border-radius: 50px;
                   padding: 10px;
                   background:#D9534F;
                   color:white;
                   p:nth-child(2){font-size: 20px;font-weight: 700;}
               }
               position: relative;
               border-radius: 4px;
               box-sizing: border-box;
               margin-top: 20px;
               padding: 20px;
               max-height: 700px;
               box-shadow: 0px 0px 1px 1px #CCCCCC;
               h3{
                   font-size: 30px;
//                 font-family: "微软雅黑";
                   color: #666666;
                   text-align: center;
               }
               ul{
                       text-align: center;
                       margin-top: 15px;
                   
                   li{
                       
                       border-radius: 4px;
                       
                       display: inline-block;
                       box-sizing: border-box;
                       padding: 5px;
                        line-height: 12px;
//                     height: 24px;
                       background: #3D4450;
                         cursor: pointer;
                        transition:background 1s;
                        &:hover{
                             background: #D9534F;
                        }
//                     text-align: center;
                       a{
                           display: inline-block;
                           span{
                           display: inline-block;
                           height: 10px;
                           width: 10px;
                           color: white;
                           margin-right:10px;
                       }
                          
                           font-size: 12px;
                            color:white;
                           
                       }
                      

                   }

                   
               }
               #image{
                  display: flex;
                  max-height: 271px;
                  width: 100%;
                  border-radius: 4px;
//                background: red;
                  p{
                      box-sizing: border-box;
                      border-radius: 4px;
                      width: 100%;
                      height: 100%;
                      img{
                          border: 1px solid white;
                          border-radius: 4px;
                          width: 100%;
                          transition:border 1s,opacity 1s;
                          &:hover{
                              border: 1px solid #E07572;
                              opacity: 0.8;
                          }
//                        height: 1;
                      }
                  }
               }
              .ms{
                min-height: 60px;
                border-radius: 4px;
//              border: 1px solid #E1E1E1;
                box-sizing: border-box;
                box-shadow: 0px 0px 1px 1px #E0E0E0;
                font-size: 12px;
//              line-height: 80px;
                text-align: left;
                background: #EEEEEE;
                padding: 20px;
                font-family: "微软雅黑";
                color: #666666;
                margin-top: 10px;
                margin-bottom: 20px;
                
            }
            .bt{
                display: flex;
                justify-content: flex-end;
                align-items: center;
                width:100%;
                min-height: 50px;
                text-align: right;
                box-sizing: border-box;
//              background: red;
                a{
                    @media all and (max-width:600px){
                        width: 100%;
                    }
                    display: flex;
                    justify-content: center;
                    text-align:center;
                    font-size: 13px;
                    border-radius: 6px;
//                  width: 100%;
//                  display: inline-block;
                    line-height: 30px;
                    width: 16%;
                    height: 30px;
                    background:#D9534F;
                    p{
                        display: inline-block; 
                    }
                    span{
                        
//                      margin-top: 10px;
//                      color:#D9534F ;
//                      width:30px;
                        height: 20px;
//                      background: green;
//                      display: inline-block;
//                      border-radius:50%;
//                      background: white;

                        
                    }
                    
                }
                
            }
           }
        }
        #right{
           width: 30%; 
           @media all and (max-width:980px){
                width: 100%;
//              max-width: 750px;
//              justify-content: center;
                
            }
//         height:800px;
//         background: darkmagenta;
           border-left: 15px solid white;
           border-right: 15px solid white;
           margin-top: 10px;
           margin-bottom: 10px;
           float: left;
//         border-radius: 0px 8px 0px 8px;
           box-sizing: border-box;
           #zc{
               width: 100%;
               display: flex;
                justify-content: center;
                input:nth-child(2){
                    margin-left: 10px;
                }
              input{
                        display: flex;
                        justify-content: center;
                        border: none;
                        border-radius: 2px;
                        min-width: 30%;
//                      width: 20%;
                        height: 34px;
                        margin-top: 10px;
//                      margin-left: 35px;
                        background: #3D4450;
                        color: white;
                        float: left;
                        cursor: pointer;
                        transition:background 1s;
                        &:hover{
                             background: #D9534F;
                        }
                    } 
           } 
            #rgin{
                width: 100%;

                border-radius: 4px;
                height: 200px;
                border: 1px solid #CCCCCC;
                background: white;
                box-sizing: border-box;
                #dl{
                    display: table;
                    margin-bottom: 20px;
                    width: 100%;
                    height:15%;
                    display: flex;
                    box-sizing: border-box;
                    justify-content: center;
                    span{
                        color: white;
                        box-sizing: border-box;
                        text-align: center;
                        font-size: 20px;
                        line-height:100%;
                        padding-top: 5px;
                        margin-top:10px;
                        height:100%;
                        display: inline-block;
                        margin-left:5px;
                        width:40px;
                        float: left;
                        background:#CA4F4A;
                    }
                       input{
                        box-sizing: border-box;
                        display: table-cell;
                        border:1px solid #999999;
                        display: inline-block;
                        outline: none;
                        height:100%;
                        float: left;
                        border-radius: 0px 4px 4px0px;
                        margin-top:10px;
                        box-sizing: border-box;
                        display: table-cell;
                        max-width:20%;
                        min-width:70%;
//                      margin-left:0px;
                        
                        
                    }
                   
                    input[type=text]:focus{
                        border: 1px solid #F89693;
                    }
                }
                div:nth-child(1){
                    box-sizing: border-box;
                    border-radius: 4px 4px 0px 0px;
                    border: 1px solid white;
                    height: 34px;
                    color: white;
                    line-height: 34px;
                    font-size: 13px;
                    padding-left: 10px;
                    font-family: "微软雅黑";
                    background:#3D4450;
                    margin-bottom: 10px;
                }

                 
            }
            #ss{
                display: flex;
                align-items: center;
                border-radius: 2px;
                margin-top: 30px;
                height: 50px;
                background:#3D4450;
                cursor: pointer;
                
                span{
                    display: flex;
                    justify-content: center;
                    border-radius: 4px;
                    margin-left:10px;
                    width: 12%;
                    height: 32px;
                    background: #D9534F;
                    &:hover{
                    background: #D2322D;
                }
                    img{
                        max-width: 18px;
                        height:18px;
//                      margin-left:5px;
                        margin-top: 5px;
                    }
                }
                input{
                    margin-left: 10px;
                    width: 75%;
                    height: 32px;
                    border-radius: 4px;
                    
                }
            }
            
            #new{
                padding-bottom:10px;
                margin-top: 30px;
                border-radius: 4px;
//              height: 200px;
                border: 1px solid #CCCCCC;
                background: white;
                box-sizing: border-box;
               ul{
                   box-sizing: border-box;
                   border-radius: 4px 4px 0px 0px;
                   border: 1px solid white;
                    width: 100%;
                    height: 30px;
//                  padding: 2px;
                    line-height: 30px;
                    padding-left: 10px;
                    font-family: "微软雅黑";
                    font-size: 13px;
                    color: white;
                    background:#3D4450;
                    span:nth-child(3){
                        margin-left: 150px;
                    }
                    a{
                        span{
                            &:hover{
                                color: #D9534F;
                            }
                        }
                        float: right;
                        margin-right: 10px;
                    }
                }
                ul:nth-child(2){
                    box-sizing: border-box;
                    border-radius:none;
                    padding-left: 0px;
                    width: 100%;
                    background:white;
                    li{
//                      display: flex;
//                      align-items: center;
                        
                        padding-left: 10px;
                        box-sizing: border-box;
                        margin-left: 0px;
                        height: 30px;
                        border-bottom: 1px solid #DDDDDD;
                        span:nth-child(1){
                            cursor: pointer;
                            &:hover{
                                color: #CB514E;
                            }
//                          margin-right: 30px;
                            font-size: 12px;
                            font-family: "微软雅黑";
                            color: #666666;}
                        span:nth-child(2){
                            margin-top:5px;
                            height: 20px;
                            float:right;
                            margin-right: 10px;
                            color:white;
                            line-height: 20px;
                            text-align: center;
                            width:50px;
                            font-size: 12px;
                            font-family: "微软雅黑";
                            background: #CB514E;
                             border-radius:10px;
                            }
                    }

                }
            .lb{
                margin-top: 2px;
                    box-sizing: border-box;
                    border-radius:none;
                    padding-left: 0px;
                    width: 100%;
                    background:white;
                    li{
//                      display: flex;
//                      align-items: center;
                        
                        padding-left: 10px;
                        box-sizing: border-box;
                        margin-left: 0px;
                        height: 30px;
                        border-bottom: 1px solid #DDDDDD;
                        span:nth-child(1){
//                          width:10px;
                            overflow: hidden;
                            white-space:nowrap;
                            text-overflow: ellipsis;
                            cursor: pointer;
                            &:hover{
                                color: #CB514E;
                            }
//                          margin-right: 30px;
                            font-size: 12px;
                            font-family: "微软雅黑";
                            color: #666666;}
                        span:nth-child(2){
                            margin-top:5px;
                            height: 20px;
                            float:right;
                            margin-right: 10px;
                            color:white;
                            line-height: 20px;
                            text-align: center;
                            width:50px;
                            font-size: 12px;
                            font-family: "微软雅黑";
                            background: #CB514E;
                             border-radius:10px;
                            }
                    }

                }
            }
            
            #pl{
                padding-bottom:10px;
                margin-top: 30px;
                border-radius: 4px;
                height:315px;
                border: 1px solid #CCCCCC;
                background: white;
                box-sizing: border-box;
               ul{
                   box-sizing: border-box;
                   border-radius: 4px 4px 0px 0px;
                   border: 1px solid white;
                    width: 100%;
                    height: 30px;
//                  padding: 2px;
                    line-height: 30px;
                    padding-left: 10px;
                    font-family: "微软雅黑";
                    font-size: 13px;
                    color: white;
                    background:#3D4450;
                    span:nth-child(3){
                        margin-left: 150px;
                    }
                    a{
                        float: right;
                        margin-right: 10px;
                    }
                }
                ul:nth-child(2){
                    box-sizing: border-box;
                    border-radius:none;
                    padding-left: 0px;
                    width: 100%;
                    background:white;
                    li{
                        display: flex;
                        justify-content: center;
//                      align-items: center;
                        width: 100%;
                        padding-left: 10px;
                        box-sizing: border-box;
                        margin-left: 0px;
                        
                        height: 70px;
                        border-bottom: 1px solid #DDDDDD;
                        span:nth-child(1){
                            margin-right: 30px;
                            margin-top:10px;
                            overflow: hidden;
                            background: red;
                             border-radius:50px;
                              @media all and (max-width:980px){
//                               margin-left: 10px;
                                 margin-right:10%;
//                              width:100%;
                    }
                            height: 40px;
                            width: 40px;
                            display: inline-block;
//                          margin-right: 30px;
                            font-size: 12px;
                            font-family: "微软雅黑";
                            color: #666666;
                            
                            img{
                                    width:40px;
                                    height:40px;
                                    transition:width 0.5s,height 0.5s;
                                    &:hover{
    
                                        width:45px;
                                        height:45px;
                                    }
                                }
                             
                            }
                        span:nth-child(2){
                            overflow: hidden;
                            white-space:nowrap;
                            text-overflow: ellipsis;
                            box-sizing: border-box;
                            padding: 2px;
                            margin-top:10px;
                            height: 40px;
                            float:right;
                            margin-right: 20px;
                            color:#666666;
                            line-height:40px;
                            text-align: center;
         
                   
                            width:70%;
                            font-size: 12px;
                            font-family: "微软雅黑";
                            background: #EEEEEE;
                            cursor: pointer;
                             border-radius:4px;
                             
                             &:hover{
                                 color:#CB514E;
                             }
                            }
                    }

                }
            .lb{
                margin-top: 2px;
                    box-sizing: border-box;
                    border-radius:none;
                    padding-left: 0px;
                    width: 100%;
                    background:white;
                    li{
//                      display: flex;
//                      align-items: center;
                        
                        padding-left: 10px;
                        box-sizing: border-box;
                        margin-left: 0px;
                        height: 30px;
                        border-bottom: 1px solid #DDDDDD;
                        span:nth-child(1){
//                          margin-right: 30px;
                            font-size: 12px;
                            font-family: "微软雅黑";
                            color: #666666;
                           
                            }
                        span:nth-child(2){
                            margin-top:5px;
                            height: 20px;
                            float:right;
                            margin-right: 10px;
                            color:white;
                            line-height: 20px;
                            text-align: center;
                            width:20%;
                            font-size: 12px;
                            font-family: "微软雅黑";
                            background: #CB514E;
                             border-radius:10px;
                            }
                    }

                }
            }
            
            #bq{
                padding-bottom:10px;
                margin-top: 30px;
                border-radius: 4px;
//              height: 200px;
                border: 1px solid #CCCCCC;
                background: white;
                box-sizing: border-box;
                ul{
                    padding-right: 5px;
                    display: flex;
                    justify-content:flex-start;
                    align-items: center;
                    width: 100%;
                    height: 50px;
                    box-sizing: border-box;
                    border: 1px solid #CCCCCC;
//                  li{flex: 1;}
                    li:nth-child(1){
                        color: white;
                    }
                    li:nth-child(2){
                        color:#666666;
                        background: white;
                    }
                    li:nth-child(3){
                        color:#666666;
                        background: white;
                    }
                    li{
                        cursor: pointer;
                        font-family: "微软雅黑";
                        border-radius: 5px;
                        height: 30px;
//                      width: 30%;
                        line-height: 16px;
                        font-size: 14px;
//                      @media all and (max-width:980px){
//                      width:30%;
//                  }
                        text-align: center;
                        margin-left: 5px;
                        padding: 8px;
                        background: #D9534F;
                        box-sizing: border-box;
                        transition: background-color 0.5s,color 0.5s; 
                        &:hover{
                            background: #D9534F;
                            color: white;
                        }
                    }
                }
                div{
                    width: 100%;
//                  display: flex;
//                  justify-content: center;
                    a{
                        box-sizing: border-box;
                        padding: 2px;
                        padding-left: 10px;
                        display: block;
                        margin-top: 5px;
                        width: 96%;
                        line-height: 24px;
                        height: 30px;
                        margin-left: 5px;
                        color:#666666; 
                        transition: background-color 0.5s,color 0.5s;
                        &:hover{
                            background:#D9534F;
                            color:white;
                        }

                    }
                }
            }
        }
    #list{
        display:flex;
        justify-content:flex-end;
        align-items: center;
        margin-top: 30px;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
       padding-right: 20px;
       a:nth-child(1){
           background:#D9534F;
           color: white;
       }
//      background: red;
        a{
            display: inline-block;
            height: 20px;
            border-radius: 4px;
            line-height: 20px;
            text-align: center;
            width: 20px;
            color:#D9534F ;
            border: 2px solid #D9534F;
            margin-left: 20px;
            &:hover{
                background:#D9534F;
                color: white;
            }
        }
    }
    }
   
}

#foot{
    float: left;
    margin-top: 30px;
    display: flex;
    height: 50px;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: #3D4450;
    box-sizing: border-box;
    padding: 10px;
    p{
        text-align: center;
        font-size: 12px;
        color: white;
    }
}







